.main{
    @include size(1200px, auto);
    margin: 0 auto;
    .item {
        width: 100%;
        height: 232px;
        padding-bottom: 32px;
        border-bottom: 1px solid var(--border-e0e0e0);
        cursor: pointer;
        margin-top: 16px;

        .item-cover {
            @include size(200px);
            overflow: hidden;

            .item-image {
                @include size;
                object-fit: cover;
                object-position: center center;
            }
        }

        .item-content {
            height: 100%;
            padding-left: 32px;
            background-color: var(--bg-ffffff);
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
            overflow: hidden;

            .item-title {
                font-weight: bold;
                color: var(--text-333333);
                @include transition((color));
            }

            .item-brochure {
                color: var(--text-666666);
                @include size(100%, 64px);
                margin: 16px 0;
                @include transition((color));
            }

            .item-author {
                color: var(--text-333333);
                @include transition((color));
            }
        }

        &:hover {
            .item-content {
                background-color: var(--bg-0066cc);

                .item-title,
                .item-brochure,
                .item-author {
                    color: var(--text-ffffff);
                }
            }
        }
    }
}

.empty{
    padding-top: 100px;
}